<template>
  <div class="content-wrapper">
    <div class="top-search-box top-search-height">
      <a-form :model="queryForm" :label-col="{ flex: '0 0 120px' }" :wrapper-col="{ flex: '1 1 0' }">
        <a-row>
          <a-col :span="6">
            <a-form-item name="name" label="name">
              <a-input v-model:value="queryForm.name" placeholder="请输入name" />
            </a-form-item>
          </a-col>
          <a-col style="margin-left: auto" :span="6">
            <div class="table-page-search-submitButtons">
              <a-space>
                <AvicAdvancedQueryButton
                  table-key="my111"
                  :query-form="queryForm"
                  :advanced="advanced"
                  @select="
                    (value, advancedFlag) => {
                      queryForm = value;
                      advanced = !advanced ? advancedFlag : advanced;
                    }
                  "
                  @search="handleQuery"
                />
                <a-button type="primary" ghost title="重置" @click="resetQuery">
                  <template #icon><RedoOutlined /></template>
                  重置
                </a-button>
                <a-button type="link" @click="toggleAdvanced">
                  {{ advanced ? '收起' : '展开' }}
                  <UpOutlined v-if="advanced" />
                  <DownOutlined v-else />
                </a-button>
              </a-space>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-wrapper">
      <AvicTable
        ref="my111Ref"
        table-key="my111TableKey"
        :row-key="(record) => record.id"
        :data-source="list"
        :loading="loading"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          onSelect: onMy111Select,
          onSelectAll: onMy111SelectAll,
          columnWidth: 40,
          fixed: true
        }"
        :show-custom-page-size="true"
        :page-parameter="queryParam.pageParameter"
        :total="totalPage"
        :columns="columns"
        :custom-row="customRow"
        @change="handleTableChange"
        @refresh="getList"
      >
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex === 'id'">
            {{ index + 1 + queryParam.pageParameter.rows * (queryParam.pageParameter.page - 1) }}
          </template>
        </template>
      </AvicTable>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 引入模块DTO
import type { My111Dto } from '@/api/avic/tlk/poart/demo/My111Api';
// 引入模块API
import { listMy111ByPage } from '@/api/avic/tlk/poart/demo/My111Api';
const $emit = defineEmits(['select', 'handleRowDblClick']);
const { proxy } = getCurrentInstance();
const props = defineProps({
  defaultSelectedRowKeys: { type: Array, default: () => [] }
});
const queryForm = ref<My111Dto>({});
const queryParam = reactive({
  // 请求表格数据参数
  pageParameter: {
    page: 1, // 页数
    rows: proxy.$settings.table.pageSize || 20 // 每页条数
  },
  searchParams: {
    ...queryForm.value
  },
  keyWord: ref(''), // 快速查询数据
  sidx: null, // 排序字段
  sord: null // 排序方式: desc降序 asc升序
});
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    ellipsis: true,
    width: 60,
    align: 'center',
    fixed: 'left'
  },
  {
    title: 'name',
    dataIndex: 'name',
    ellipsis: true,
    width: 200,
    resizable: true,
    align: 'left'
  },
  {
    title: '密级',
    dataIndex: 'secretLevelName',
    ellipsis: true,
    minWidth: 100,
    resizable: true,
    align: 'left'
  }
];
const { lookupList } = useLookup(['PLATFORM_FILE_SECRET_LEVEL']);
const list = ref([]); // 表格数据集合
const advanced = ref(false); // 高级搜索 展开/关闭
const selectedRowKeys = ref([]); // 选中数据主键集合
const selectedRows = ref([]); // 选中行集合
const totalPage = ref(0);
const loading = ref(false);
onMounted(() => {
  // 加载表格数据
  getList();
});
/** 查询数据 */
function getList() {
  selectedRowKeys.value = []; // 清空选中
  selectedRows.value = [];
  list.value = [];
  loading.value = true;
  listMy111ByPage(queryParam)
    .then((response) => {
      list.value = response.data.result;
      totalPage.value = response.data.pageParameter.totalCount;
      loading.value = false;
      if (props.defaultSelectedRowKeys) {
        selectedRowKeys.value = props.defaultSelectedRowKeys;
      }
    })
    .catch(() => {
      list.value = [];
      totalPage.value = 0;
      loading.value = false;
    });
}

/** 高级查询 查询按钮操作 */
function handleQuery() {
  queryParam.searchParams = queryForm.value;
  queryParam.keyWord = '';
  queryParam.pageParameter.page = 1;
  getList();
}

/** 高级查询 重置按钮操作 */
function resetQuery() {
  queryForm.value = {};
  handleQuery();
}

/** 高级查询 展开/收起 */
function toggleAdvanced() {
  advanced.value = !advanced.value;
}

/** 勾选复选框时触发 */
function onSelectChange(rowKeys, rows) {
  selectedRowKeys.value = rowKeys;
  selectedRows.value = rows;
}

/** 选中 */
function onMy111Select(record, selected) {
  $emit('select', [record], selected);
}

/** 全选 */
function onMy111SelectAll(selected, _selectedRows, changeRows) {
  $emit('select', changeRows, selected);
}

/** 表头排序 */
function handleTableChange(pagination, _filters, sorter) {
  queryParam.pageParameter.page = pagination.current;
  queryParam.pageParameter.rows = pagination.pageSize;
  if (proxy.$objIsNotBlank(sorter.field)) {
    queryParam.sidx = sorter.field;
    queryParam.sord = sorter.order === 'ascend' ? 'asc' : 'desc';
  }
  getList();
}

/** 行双击事件 */
function customRow(record) {
  return {
    onDblclick: (event) => {
      $emit('handleRowDblClick', [record]);
    }
  };
}
</script>
